<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="../lib/resources/css/ext-all.css"/>
        <script type="text/javascript" src="../lib/js/ext-base-debug.js">
        </script>
        <!-- ENDLIBS -->
        <script type="text/javascript" src="../lib/js/ext-all-debug.js">
        </script>
    </head>
    <body>
        <script type="text/javascript">
            
            Ext.tree.TreeNode.override({
                appendChild: Ext.tree.TreeNode.prototype.appendChild.createInterceptor(function(n){
                    var maxDepth = this.getOwnerTree().maxDepth;
                    if (maxDepth && this.getDepth() == maxDepth - 1) {
                        n.leaf = true;
                    }
                })
            })
            Ext.onReady(function(){
                new Ext.Window({
                    width: 300,
                    height: 300,
                    layout: 'fit', // explicitly set layout manager: override the default (layout:'auto')
                    items: [{
	
						baseCls:'x-plain',
                        title: 'Panel inside a Window'
                    }]
                }).show();
                
                var mytree = new Ext.tree.TreePanel({
                    region: 'west',
                    width: 200,
                    maxDepth: 1,
                    title: '角色列表',
                    autoScroll: true,
                    loader: new Ext.tree.TreeLoader({
                        url: 'menu.json'
                    }),
                    rootVisible: false,
                    root: new Ext.tree.AsyncTreeNode({
                        text: 'root'
                    })
                });
                
                var viewport = new Ext.Viewport({
                    layout: 'border',
                    items: [mytree, {
                        region: 'center'
                    }]
                });
            });
        </script>
    </body>
</html>
